<template>
  <div>
    <div class="mt-2">
      <InputWrap
        v-model="socialLinks.instagram.value"
        :append-icon="socialLinks.instagram.appendIcon"
        placeholder="Instagram"
        bg-dark
      ></InputWrap>
    </div>
    <div class="mt-2">
      <InputWrap
        v-model="socialLinks.twitter.value"
        :append-icon="socialLinks.twitter.appendIcon"
        placeholder="Twitter"
        bg-dark
      ></InputWrap>
    </div>
    <div class="mt-2">
      <InputWrap
        v-model="socialLinks.tiktok.value"
        :append-icon="socialLinks.tiktok.appendIcon"
        placeholder="TikTok"
        bg-dark
      ></InputWrap>
    </div>
    <div class="mt-2">
      <InputWrap
        v-model="socialLinks.vida.value"
        :append-icon="socialLinks.vida.appendIcon"
        placeholder="Vida"
        bg-dark
      ></InputWrap>
    </div>
    <div class="mt-2 text-white font-size-12 font-style-normal font-weight-400 line-height-120">
      {{ $t('info.forExample') }}：https://instagram.com/example0056
    </div>
    <div class="mt-2 text-white font-size-12 font-style-normal font-weight-400 line-height-120">
      {{ $t('info.accept') }}：Instagram \ Twitter \ TikTok \ Vida
    </div>
  </div>
</template>
<script setup>
import { debounce } from 'lodash-es'
import { computed, reactive, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog.js'
import { useYup } from '@/plugins/yup'
import { parseLink } from '@/utils/string-helper'
import InputWrap from '@/components/form/InputWrap.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'

const popupDialog = usePopupDialogStore()
const { content } = storeToRefs(popupDialog)

watch(content, (newValue) => {
  console.log('content.newValue', newValue)
  socialLinks.instagram.value = newValue?.instagram?.value ?? ''
  socialLinks.twitter.value = newValue?.twitter?.value ?? ''
  socialLinks.tiktok.value = newValue?.tiktok?.value ?? ''
  socialLinks.vida.value = newValue?.vida?.value ?? ''
})

const Yup = useYup()

const hasValue = (obj) => {
  return obj.value.length > 0
}

const socialLinks = reactive({
  instagram: {
    value: content.value.instagram?.value,
    appendIcon: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.instagram) ? Yup.string().instagram() : Yup.string())),
  },
  twitter: {
    value: content.value.twitter?.value,
    appendIcon: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.twitter) ? Yup.string().twitter() : Yup.string())),
  },
  tiktok: {
    value: content.value.tiktok?.value,
    appendIcon: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.tiktok) ? Yup.string().tiktok() : Yup.string())),
  },
  vida: {
    value: content.value.vida?.value,
    appendIcon: '',
    check: false,
    schema: computed(() => (hasValue(socialLinks.vida) ? Yup.string().vida() : Yup.string())),
  },
})

const validate = (obj) => {
  try {
    obj.schema.validateSync(obj.value)
    obj.check = true
    obj.appendIcon = hasValue(obj) ? 'yesActive' : ''
  } catch (err) {
    console.log('validate error', err.message)
    obj.appendIcon = 'noActive'
    obj.check = false
  }
}

watch(
  () => socialLinks.instagram.value,
  debounce(() => {
    validate(socialLinks.instagram)
  }, 500),
  { immediate: true },
)

watch(
  () => socialLinks.tiktok.value,
  debounce(() => {
    validate(socialLinks.tiktok)
  }, 500),
  { immediate: true },
)

watch(
  () => socialLinks.twitter.value,
  debounce(() => {
    validate(socialLinks.twitter)
  }, 500),
  { immediate: true },
)

watch(
  () => socialLinks.vida.value,
  debounce(() => {
    validate(socialLinks.vida)
  }, 500),
  { immediate: true },
)

useConfirmData(() => {
  Object.values(socialLinks).forEach((obj) => {
    validate(obj)
  })

  if (
    !socialLinks.instagram.check ||
    !socialLinks.twitter.check ||
    !socialLinks.tiktok.check ||
    !socialLinks.vida.check
  )
    return false

  const result = {}
  Object.entries(socialLinks).forEach(([key, obj]) => {
    result[key] = { value: obj.value }
  })

  socialLinks.instagram.appendIcon = ''
  socialLinks.twitter.appendIcon = ''
  socialLinks.tiktok.appendIcon = ''
  socialLinks.vida.appendIcon = ''

  return result
})
</script>
